<?php if(@$page_name=='Forum')  { ?>
<div id="changedp" class="changedp reveal-modal medium" data-reveal data-options="animation:'fade',animation_speed:250">
<div class="large-12 column" style="padding:0;">

	<div class="change-head large-12 column">
		<div class="large-12 column" style="padding:0;">
			<p><strong style="color:white;">Change Forum Profile Picture</strong></p>
		</div>
	</div>
	<div class="change-content large-12 column" data-equalizer>
		<div class="medium-5 large-7 column" data-equalizer-watch>
			<div class="large-12 column" style="padding:0;">
				<div class="large-12 column" style="padding:0;">
				<strong>Avatars</strong>
					<ul class="avatar-li small-block-grid-2 medium-block-grid-2 large-block-grid-4">
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a1.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a5.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a4.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a6.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a8.jpg">
							</a>
						</li>
					  	<li>
						  	 <a href="javascript:;" id="castle" class="avatarclick th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/steve.jpg">
							</a>
						</li>
					</ul>
				</div>

				<div class="large-12 column" style="padding:0;">
					<hr class="hr-forum-dp">
				</div>
				<div style="width:100%;position:absolute;bottom:0;">
					<a class="expand radius button">Use Account Picture<img style="display:none;width:5px;height:5px;" src="<?= IMAGE_URL_SMALL.$this->session->get('profile_pic') ?>"></a>
				</div>

				</div>

		</div>
		<div class="medium-7 large-5 column" data-equalizer-watch>
			<div id="forum-img" class="forum-img forum-dp-c large-12 column" style="background-size:100% 100%;height:18rem;width:100%;">
			</div>
			<div class="text-center large-12 column" style="padding:0;">
				<a id="" class="expand button" style="background:#009EA1;">Browse</a>
			</div>
		</div>
	</div>
	<div class="change-footer large-12 column">
		<div class="text-right large-12 column">
			<a class="tiny radius button">Cancel</a>
			<a class="save tiny radius button">Save</a>
		</div>
	</div>

</div>

</div>

<?php } if((@$page_name=='Step_1') || (@$page_name=='Profile'))  { ?>
<div id="changeprimarydp" class="changedp reveal-modal medium" data-reveal data-options="animation:'fade',animation_speed:250">
<div class="large-12 column" style="padding:0;">

	<div class="change-head large-12 column">
		<div class="large-12 column" style="padding:0;">
			<p><strong style="color:white;">Change Profile Picture</strong></p>
		</div>
	</div>
	<div class="change-content large-12 column" data-equalizer>
		<div class="medium-5 large-7 column" data-equalizer-watch>
			<div class="large-12 column" style="padding:0;">
				<div class="large-12 column" style="padding:0;">
				<strong>Avatars</strong>
					<ul class="avatar-li small-block-grid-2 medium-block-grid-2 large-block-grid-4">
					  	<li>
						  	 <a class="th radius">
							  <img  class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136372/a1_dk3k4k.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a8_f84rrb.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a7_krhaou.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a6_siqa8v.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136459/a5_bgqjbb.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136459/a4_iitn8a.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a3_igmha6.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136457/a2_sw13fs.jpg">
							</a>
						</li>
					</ul>
				</div>

				</div>

		</div>
		<div class="medium-7 large-5 column" data-equalizer-watch>
			<div id="forum-img" class="forum-img forum-dp-c large-12 column" style="background-size:100% 100%;height:18rem;width:100%;">
			</div>
			<input type="file" accept = "image/*" id="fileUpload" name="profile_pic" style="visibility: hidden; width: 1px; height: 1px" multiple />
			<div class="text-center large-12 column" style="padding:0;">
				<a id="btnUpload" class="expand button" style="background:#009EA1;">Browse</a>
			</div>
		</div>
	</div>
	<div class="change-footer large-12 column">
		<div class="text-right large-12 column">
			<a class="tiny radius button">Cancel</a>
			<a id="btnSaveMyImage" class="save tiny radius button">Save</a>
			<span id="uploading">Uploading <img src="<?= BASE_URI ?>img/loading.gif"/> </span>
		</div>
	</div>

</div>

</div>
<?php } if(@$page_name=='Step_1') { ?>
<script type="text/javascript">

jQuery(document).ready(    function() { 
	$('#uploading').hide();
	$('.forum-img').css('background-color','#C9C9C7');
	$('.forum-img').css('background-image', 'url(' + prof_pic + ')');	
	
});

$('.my_image').click(function() { 
	$('.forum-img').css('background-image', 'url(' + $(this).attr('src') + ')'); 
});

var path = '';
var $profilePic = $('.forum-img');
var $btnSaveMyImage = $('#btnSaveMyImage');
var $file = $('#fileUpload');
var $upload = $('#btnUpload');

function readURL(input)
{
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            path = e.target.result;
            $('.b-company-logo').css('background-image', 'url(' + path + ')');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

function uploadPhoto(path,id)
{
  var dynamicData = {};
    dynamicData['path'] = path;
    dynamicData['id'] = id;
    return $.ajax({
        url: URL + 'api/upload/profile_pic',
        data: dynamicData,
        dataType: 'json',
        type: 'post'
    }); 
}

$upload.on('click',function(){
	$file.click();
});

$file.on('change',function(){
readURL(this);
});

$btnSaveMyImage.on('click',function(){
	//$profilePic.css('background-image', 'url(' + URL+'img/loading.gif' + ')');
	$('#uploading').show();
	var bg = $profilePic.css('background-image');
    bg = bg.replace('url(','').replace(')','');
		var id = "<?='profile_pic_'.$this->session->get('user_id'); ?>";
       uploadPhoto(bg,id).done(function(result){
            if(result.status == true)
            {
            	$('#uploading').hide();
            	$('#changeprimarydp').foundation('reveal', 'close');
            	$('#profilePic').attr('src',bg);
            }
            else
            {    	
            	alert('There is a problem on saving your photo pls try again later')
     		    //alert(result.messages);
            }
        });
});
</script>

<?php } else{ ?>
<script type="text/javascript">
	var $profilePic = $('.forum-img');
	var $btnSaveMyImage = $('#btnSaveMyImage');
	var $file = $('#fileUpload');
	var $upload = $('#btnUpload');
	$('#uploading').hide();


	function readURL(input)
	{
	    if (input.files && input.files[0]) {
	        var reader = new FileReader();
	        reader.onload = function (e) {
	            path = e.target.result;
	            $('.forum-img').css('background-image', 'url(' + path + ')');
	        }
	        reader.readAsDataURL(input.files[0]);
	    }
	}

	function uploadPhoto(path,id)
	{
	  var dynamicData = {};
	    dynamicData['path'] = path;
	    dynamicData['id'] = id;
	    return $.ajax({
	        url: URL + 'api/upload/profile_pic',
	        data: dynamicData,
	        dataType: 'json',
	        type: 'post'
	    }); 
	}

	$(document).ready(function(){
	
		var prof_pic = '<?= IMAGE_URL_SMALL.$this->session->get("profile_pic"); ?>';
		$('.forum-img').css('background-color','#C9C9C7');
		$('.forum-img').css('background-image', 'url(' + prof_pic + ')');	
		
	});
	
	$('.my_image').click(function() { 
		$('.forum-img').css('background-image', 'url(' + $(this).attr('src') + ')'); 
	});

	$(document).on('click','#btnUpload',function(){
		$('#fileUpload').click();

	});
	
	$('#fileUpload').on('change',function(){
		readURL(this);
	});

	$btnSaveMyImage.on('click',function(){
		$btnSaveMyImage.html('<span id="uploading"><img src="<?= BASE_URI ?>img/loading.gif"/> Uploading  </span>');
	//$profilePic.css('background-image', 'url(' + URL+'img/loading.gif' + ')');
		$('#uploading').show();
		var bg = $('.forum-img').css('background-image');
	    bg = bg.replace('url(','').replace(')','');
			var id = "<?='profile_pic_'.$this->session->get('user_id'); ?>";
	       uploadPhoto(bg,id).done(function(result){
	            if(result.status == true)
	            {
	            	window.location.reload();
	            	$('#uploading').hide();
	            	$('#changeprimarydp').foundation('reveal', 'close');
	            	$('#profilePic2').css('background-image', 'url(' + bg + ')');	
	            }
	            else
	            {    	
	            	alert('There is a problem on saving your photo pls try again later')
	     		    //alert(result.messages);
	            }
	        });
	});
</script>



<div id="alertconfirm" class="reveal-modal small" data-reveal data-options="closeOnBackgroundClick:false" style="background:none !important;border:none;box-shadow:none;">
	<div class="row">
	  <div class="small-11 large-12 columns small-centered" style="padding:0;">
	    <div class="alert-panel" data-alert>
	      <div class="alert-panel-title">
	        Are you sure you want to delete this?
	        
	      </div>
	      <div class="alert-panel-message">
	        When you click continue you can't undo.
	      </div>
	      <div class="alert-panel-action">
	        <a class="tiny button radius secondary">Cancel</a>
	        <a class="tiny button radius success">Continue</a>
	      </div>
	    </div>
	  </div>
	</div>      
</div>


<div id="PostJob" class="reveal-modal small" data-reveal data-options="closeOnBackgroundClick:false" style="background:none !important;border:none;box-shadow:none;">
	<div class="row">
	  <div class="small-11 large-12 columns small-centered" style="padding:0;">
	    <div class="alert-panel" data-alert>
	      <div class="alert-panel-title">

	     <label><strong style="color:white;">Post Job</strong></label>
	      </div>
	      <div class="alert-panel-message">
                <div class="row collapse">
                    <div class="small-3 large-2 columns">
                      <span class="prefix" style="border:none;color:gray;">Title</span>
                    </div>
                    <div class="small-9 large-10 columns">
                      <input type="text" style="border:none;">
                    </div>
                </div>
                <div class="row collapse">
                    <div class="small-3 large-2 columns">
                      <span class="prefix" style="border:none;color:gray;">Link</span>
                    </div>
                    <div class="small-9 large-10 columns">
                      <input type="text" style="border:none;">
                    </div>
                </div>           
	      <label style="color:#009EA1"><strong>Job Description</strong></label>
	        <textarea placeholder="Write the Job Description here"></textarea>
	        <div class="row" style="padding:0;">
	            <div class="medium-12 column">
	                <label style="color:#009EA1"><strong>Field and Skills required</strong></label>
                	<select style="border:none;">
                		<option>Bachelor of Science in Information Technology</option>
                	</select>
                </div>
                <div class="medium-12 column">
	                <div class="row collapse">
	                    <div class="small-3 large-2 columns">
	                      <span class="prefix" style="border:none;color:gray;">Skills</span>
	                    </div>
	                    <div class="small-9 large-10 columns">
	                      <input type="text" style="border:none;">
	                    </div>
	                </div>
                </div>         	
	        </div>
	      </div>
	      <div class="alert-panel-action">
	        <a class="tiny button radius secondary">Cancel</a>
	        <a class="tiny button radius success">Post</a>
	      </div>
	    </div>
	  </div>
	</div>      
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$('.modal-rating').jRating({
			length : 5,
			decimalLength : 1,
		});
	});
</script>

<?php } ?>

<?php if(@$page_name=='Forum')  { ?>
<div id="createThread1" class="reveal-modal small" data-reveal data-options="closeOnBackgroundClick:false" style="background:none !important;border:none;box-shadow:none;">
<div class="row">
	  <div class="small-11 large-12 columns small-centered" style="padding:0;">
	    <div class="alert-panel" data-alert>
	      <div class="alert-panel-title">

	     <label><strong style="color:white;">Create New Thread</strong></label>
	      </div>
	      <div class="alert-panel-message">
                <div class="row collapse">
                    <div class="small-3 large-2 columns">
                      <span class="prefix" style="border:none;color:gray;">Title</span>
                    </div>
                    <div class="small-9 large-10 columns">
                      <input type="text" style="border:none;">
                    </div>
                </div>          
	        <div class="row" style="padding:0;">
	            <div class="medium-12 column">
	                <label style="color:#009EA1"><strong>Thread Category</strong></label>
                	<select style="border:none;">
                		<option>Web Designing</option>
                	</select>
                </div>
                <div class="medium-12 column">
             		<label style="color:#009EA1"><strong>Thread Content</strong></label>
					<div class="editor-panel medium-12 column" id="wysihtml5-toolbar" style="display: none;">
					  <a class="editor button" data-wysihtml5-command="bold">B</a>
					  <a class="editor button" data-wysihtml5-command="italic">I</a>
					  <a class="editor button" data-wysihtml5-command="underline">U</a>
					  <a class="editor button" data-wysihtml5-command="insertLineBreak">Break</a>
					  <a class="editor button" data-wysihtml5-command="insertOrderedList"><i style="color:white;" class="fa fa-list-ol"></i></a>
					  <a class="editor button" data-wysihtml5-command="insertUnorderedList"><i style="color:white;"class="fa fa-list"></i></a>
					  <a class="editor button" data-wysihtml5-command="createLink">insert link</a>
					  <div class="okcancel" data-wysihtml5-dialog="createLink" style="display: none;">
					    <label>
					      Link:
					      <input data-wysihtml5-dialog-field="href" value="http://" class="text">
					    </label>
					    <a data-wysihtml5-dialog-action="save" style="color:#009EA1">OK</a> <a style="color:gray" data-wysihtml5-dialog-action="cancel">Cancel</a>
					  </div>
					</div>
					<form>
						<textarea id="wysihtml5-textarea" placeholder="Place your content here" style="min-height:100px;height:100%;border:solid 1px #DFE0E4;border-radius:.35rem;" autofocus>
						</textarea>
					</form>
                </div>         	
	        </div>
	      </div>
	      <div class="alert-panel-action">
	        <a class="tiny button radius secondary">Cancel</a>
	        <a data-reveal-id="createThread2" class="tiny button radius success">Next</a>
	      </div>
	    </div>
	  </div>
	</div>    
</div>

<div id="createThread2" class="reveal-modal small" data-reveal data-options="closeOnBackgroundClick:false" style="background:none !important;border:none;box-shadow:none;">
<div class="row">
	  <div class="small-11 large-12 columns small-centered" style="padding:0;">
	    <div class="alert-panel" data-alert>
	      <div class="alert-panel-title">

	     <label><strong style="color:white;">Create New Thread (Insert Image)</strong></label>
	      </div>
	      <div class="alert-panel-message">         
	        <div class="row" style="padding:0;">
	        <div class="medium-4 column">
	        	<a class="transformbtn radius tiny button">Browse Image</a> 
	     		<a class="radius th" href="img/icons/addimg.png">
				  <img src="<?=BASE_URI ?>img/icons/addimg.png">
				</a>    	
	        </div>
	        <div class="medium-4 column">
	        	<a class="transformbtn radius tiny button">Browse Image</a> 
	    		<a class="radius th" href="../img/icons/addimg.png">
				  <img src="<?=BASE_URI ?>img/icons/addimg.png">
				</a>     	
	        </div>
	        <div class="medium-4 column">
	        	<a class="transformbtn radius tiny button">Browse Image</a> 
	       		<a class="radius th" href="img/icons/addimg.png">
				  <img src="<?=BASE_URI ?>img/icons/addimg.png">
				</a> 
	        </div>       	
	        </div>
	      </div>
	      <div class="alert-panel-action">
	        <a class="tiny button radius secondary">Cancel</a>
	        <a class="tiny button radius success">Save</a>
	      </div>
	    </div>
	  </div>
	</div>    
</div>

<?php } ?>














